<template>
  <!-- 文章详情页面 -->
  <div class="article-detail" v-if="article">
    <h1>{{ article.title }}</h1>
    <!-- 文章元信息：作者和标签 -->
    <div class="article-meta">
      <span>作者：{{ article.author }}</span>
      <span>标签：<span v-for="tag in article.tags" :key="tag" class="tag">{{ tag }}</span></span>
    </div>
    <!-- 文章内容，支持富文本展示 -->
    <div class="article-content" v-html="article.content"></div>
    <hr />
    <!-- 评论区组件，传入当前文章 id -->
    <CommentSection :articleId="article.id" />
  </div>
  <div v-else>文章不存在</div>
</template>

<script setup>
// 引入 Vue 的 Composition API
import { ref, computed } from 'vue'
// 引入路由，用于获取路由参数
import { useRoute } from 'vue-router'
// 引入评论区组件
import CommentSection from '../components/CommentSection.vue'
// 引入 Pinia 博客 store
import { useBlogStore } from '../stores/blog'

// 获取路由实例
const route = useRoute()
// 获取博客 store 实例
const blog = useBlogStore()
// 获取当前文章 id
const articleId = Number(route.params.id)
// 根据 id 获取当前文章，若不存在则为 undefined
const article = computed(() => blog.getArticleById(articleId))
</script>

<style scoped>
/* 页面样式，居中显示，卡片风格 */
.article-detail {
  max-width: 800px;
  margin: 40px auto;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px #e3e3e3;
  padding: 32px;
}
.article-meta {
  font-size: 13px;
  color: #888;
  margin-bottom: 8px;
}
.tag {
  background: #e3f0ff;
  color: #409eff;
  border-radius: 4px;
  padding: 2px 8px;
  margin-right: 4px;
  font-size: 12px;
}
.article-content {
  margin: 24px 0;
  color: #333;
  line-height: 1.8;
}
</style> 